import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'heroes-list',
  template: `
<heroes-detail [hero]="selectedHero"></heroes-detail>
<h2>My Heroes</h2>
<ul class="heroes">
 <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
  `,
  styleUrls: ['./heroes-list.component.css']
})
export class HeroesListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  @Input() heroes:Hero[];
  selectedHero:Hero;
  onSelect(hero:Hero){
    this.selectedHero = hero;
  }
}
